<template>
  <div class="user-table-container">
    <!-- 搜索区域 -->
    <div class="search-area">
      <el-select
          v-model="selectedCategory"
          placeholder="选择查询分类"
          style="width: 240px; margin-right: 10px"
      >
        <el-option
            v-for="(item, index) in categoryOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
      <el-input
          v-model="QueryKeyword"
          placeholder="请输入内容搜索"
          clearable
          style="width: 700px; margin-right: 10px"
      />
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </div>

    <!-- 表格容器：处理滚动，避免遮挡分页 -->
    <div class="table-wrapper">
      <el-table
          :data="userList"
          border
          stripe
          style="width: 100%"
          :loading="tableLoading"
      >
        <el-table-column prop="username" label="用户名" width="220" />
        <el-table-column prop="nickname" label="昵称" width="220" />
        <el-table-column prop="phone" label="电话" width="220" />
        <el-table-column prop="email" label="邮箱" width="270" />
        <el-table-column prop="create_time" label="创建时间" width="200">
          <template #default="scope">
            {{ formatDateTime(scope.row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button
                size="small"
                type="info"
                @click="handleDetail(scope.row)"
                icon="InfoFilled"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域：固定在底部 -->
    <div class="pagination-area">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 12, 15]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          class="full-width-pagination"
      />
    </div>

    <!-- 详情弹窗：统一所有字段样式，使用el-input包裹 -->
    <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        width="500px"
    >
      <el-form :model="detailUser" label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="detailUser.username" disabled />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="detailUser.nickname" disabled />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="detailUser.phone" disabled />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="detailUser.email" disabled />
        </el-form-item>
        <!-- 修改：创建时间使用el-input包裹 -->
        <el-form-item label="创建时间">
          <el-input :value="formatDateTime(detailUser.create_time)" disabled />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import admin from '@/api/admin.js'

// 1. 表格与分页核心数据
const userList = ref([])
const tableLoading = ref(false)
const pageNum = ref(1)        // 当前页码（默认第1页）
const pageSize = ref(10)      // 每页条数（默认10条）
const total = ref(0)          // 总记录数（后端返回）

// 2. 查询参数
const QueryKeyword = ref('')
const selectedCategory = ref('username')

// 3. 下拉框选项
const categoryOptions = ref([
  { label: '按用户名查询', value: 'username' },
  { label: '按昵称查询', value: 'nickname' },
  { label: '按电话查询', value: 'phone' },
  { label: '按邮箱查询', value: 'email' }
])

// 4. 详情弹窗数据
const dialogVisible = ref(false)
const dialogTitle = ref('用户详情')
const detailUser = ref({
  username: '',
  nickname: '',
  phone: '',
  email: '',
  create_time: '',
  is_deleted: null,
  id: ''
})

// 5. 日期格式化工具
const formatDateTime = (dateTime) => {
  if (!dateTime) return ''
  const date = new Date(dateTime)
  return date.toLocaleString('zh-CN', {
    year: 'numeric', month: '2-digit', day: '2-digit',
    hour: '2-digit', minute: '2-digit', second: '2-digit'
  })
}

// 6. 搜索功能（携带分页参数）
const handleSearch = async () => {
  try {
    tableLoading.value = true
    const queryParams = {
      queryType: selectedCategory.value,
      keyword: QueryKeyword.value || '',
      pageNum: pageNum.value,
      pageSize: pageSize.value
    }
    // 调用后端分页接口（需确保后端返回PageInfo格式）
    const pageInfo = await admin.getAdminInfo(queryParams)  // request拦截后的只返回data
    // 赋值表格数据与分页信息
    userList.value = pageInfo.list || []
    total.value = pageInfo.total || 0

    // 清除弹窗旧数据
    detailUser.value = {
      username: '', nickname: '', phone: '', email: '',
      create_time: '', is_deleted: null, id: ''
    }
  }finally {
    tableLoading.value = false
  }
}

// 7. 详情弹窗触发
const handleDetail = (row) => {
  detailUser.value = JSON.parse(JSON.stringify(row))  // 深拷贝避免数据联动
  dialogVisible.value = true
}


// 9. 分页交互：每页条数改变
const handleSizeChange = (val) => {
  pageSize.value = val
  pageNum.value = 1  // 切换条数时重置为第1页
  handleSearch()
}

// 10. 分页交互：当前页码改变
const handleCurrentChange = (val) => {
  pageNum.value = val
  handleSearch()
}

// 11. 页面挂载时加载初始数据
onMounted(async () => {
  await handleSearch()
})
</script>

<style scoped>
/* 外层容器：保持相对定位，微调最小高度（可选，避免容器过高） */
.user-table-container {
  padding: 20px;
  position: relative;
  min-height: calc(100vh - 100px); /* 微调：减少20px，避免容器底部留白过多 */
  box-sizing: border-box;
}

/* 搜索区域样式：不变 */
.search-area {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 10px;
  flex-wrap: wrap;
}

/* 表格容器：关键调整！减小高度，为分页向上挪腾出空间 */
.table-wrapper {
  /* 原高度：calc(100% - 100px)，现减少20px，让分页上移 */
  height: calc(100% - 80px);
  overflow-y: auto;
  margin-bottom: 12px; /* 减少与分页的间距（原16px） */
}

/* 分页区域：核心修改！减小bottom值，让分页向上移动 */
.pagination-area {
  position: absolute;
  bottom: 10px; /* 原20px，减少10px，分页上移10px（可根据需求调整为8px/5px） */
  left: 20px;
  right: 20px;
  width: calc(100% - 40px);
  justify-content: center;
  display: flex; /* 新增：确保分页组件水平居中，避免布局偏移 */
}

/* 分页组件宽度适配：不变 */
.full-width-pagination {
  width: 100%;
  max-width: 100%;
}

.full-width-pagination ::v-deep .el-pagination__total,
.full-width-pagination ::v-deep .el-pagination__sizes,
.full-width-pagination ::v-deep .el-pagination__jump {
  flex: 0 0 auto;
  margin: 0 16px;
}

.full-width-pagination ::v-deep .el-pagination__pager {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* 小屏幕优化：同步调整分页bottom值 */
@media (max-width: 768px) {
  .full-width-pagination ::v-deep .el-pagination {
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  .full-width-pagination ::v-deep .el-pagination__pager {
    order: 4;
    width: 100%;
  }
  .pagination-area {
    width: calc(100% - 20px);
    right: 10px;
    bottom: 8px; /* 小屏幕同步上移，原10px */
  }
}

/* 响应式输入框宽度：不变 */
@media (max-width: 1400px) {
  .el-input {
    width: 500px !important;
  }
}
@media (max-width: 1200px) {
  .el-input {
    width: 300px !important;
  }
}
</style>
